// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the GNU Affero General Public License v3.0.
// See the LICENCE file in the repository root for full licence text.

.beatmap-discussion-editor {
  @_top: beatmap-discussion-editor;
  @padding: 15px;

  display: flex;
  background-color: @osu-colour-b4;
  flex-direction: column;

  .fancy-scrollbar();

  &--edit-mode {
    margin-bottom: 10px;
  }

  &__block {
    position: relative; // Slate's placeholder element has width: 100% directly set on it...

    .@{_top}--readonly & {
      &:hover .@{_top}__hover-menu {
        display: none;
      }
    }

    &:hover .@{_top}__hover-menu {
      display: block;
    }
  }

  &__block-count {
    margin-right: 10px;
  }

  &__hover-menu {
    bottom: -10px;
    display: none;
    margin-left: -@padding;
    position: absolute;
    user-select: none; // workaround for slatejs 'Cannot resolve a Slate point from DOM point' nonsense
    .default-text-shadow();
    z-index: @z-index--blackout-visible;
  }

  &__button-bar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: @padding;
    background: @osu-colour-b6;
    border-radius: 0 0 @border-radius-base @border-radius-base;
  }

  &__content {
    display: flex;
    margin: 0 @padding @padding @padding;
    flex-direction: column;
    color: white;
    background: @osu-colour-b5;
    .default-border-radius();

    .@{_top}--edit-mode & {
      margin: 0 -@padding;
      border: 2px solid hsl(200, 60%, 50%);
    }

    @media @mobile {
      margin: 0;
    }
  }

  &__inner-block-count {
    display: flex;
    justify-content: flex-end;
    pointer-events: none;
    margin: -31px 10px 10px;
  }

  &__input-area {
    .content-font();
    max-height: calc(50 * var(--vh, 1vh));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;

    & > div {
      padding: @padding;

      .@{_top}--edit-mode & {
        padding-bottom: @padding + 31px; // 31px is the height of .circular-progress
      }
    }

    .@{_top}--edit-mode & {
      max-height: unset;
    }

    .@{_top}--readonly & {
      opacity: 0.5;
    }
  }

  &__menu {
    color: white;
    font-size: 16px;
  }
}
